<template>

  <div class="choose-con">
    <div class="top">
      <div class="logo">
        <img src="@/assets/img/logo1.png" alt="" />
      </div>
    </div>
    <div class="main">
      <div class="title">
        <h3>选择您的身份，以便您更好的使用此平台</h3>
        <p>Choose your identity so that you can better use this platform</p>
      </div>
      <div class="bottom">
        <div class="item">
          <div class="item-con">
            <img src="@/assets/img/Snipaste_2022-08-03_11-02-28.png" alt="" />
            <p>数据中心</p>
          </div>
        </div>
        <div class="item operation">
					   <div class="item-con">
            <img src="@/assets/img/Snipaste_2022-08-03_11-10-28.png" alt="" />
            <p>运营中心</p>
          </div>
        </div></div>
      </div>
    </div>
  </div></template>
</template>

<script>
export default {
  data() {
    return {};
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="less" scoped>
.choose-con {
  width: 100vw;
  height: 100vh;
  background: #1a202c;

  .top {
    width: 100%;
    height: 50px;
    background: #232b38;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    .logo {
      width: 180px;
      height: 48px;

      img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
  }
  .main {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    color: white;
    .title {
      h3 {
        font-size: 36px;
        font-weight: 600;
        color: #b1cffc;
        line-height: 25px;
      }
      p {
        width: 100%;
        text-align: center;
        color: #718096;
      }
    }
  }
}
.bottom {
  padding: 60px 90px;
  display: flex;
  // justify-content: center;
  .item {
    // transition: all 0.6s;
    transition: all 0.4s ease 0s;
    // align-items: center;
    // justify-items: center;
    margin-left: 20px;
    width: 200px;
    height: 200px;
    background: rgba(3, 41, 76, 0.4);
    border-radius: 2px;
    opacity: 1;
    border: 1px solid;
    border-image: linear-gradient(
        270deg,
        rgba(21.000000648200512, 214.00000244379044, 255, 1),
        rgba(21.000000648200512, 214.00000244379044, 255, 0.10000000149011612),
        rgba(21.000000648200512, 214.00000244379044, 255, 1)
      )
      1 1;
    .item-con {
      // position: relative;
      // left: 50%;
      // top: 50%;
      // transform: translate(-50%, -50%);
      // -webkit-transform: translate(-50%, -50%);
      img {
        padding-top: 30px;
        padding-left: 65px;
      }
      p {
        padding-top: 12px;
        text-align: center;
        font-size: 8px;
        // font-family: Alibaba PuHuiTi 2-55 Regular, Alibaba PuHuiTi 20;
        // font-weight: normal;
        color: #ffffff;
        line-height: 12px;
        // -webkit-background-clip: text;
        // -webkit-text-fill-color: transparent;
      }
    }
  }
  .operation {
    background: rgba(26, 129, 89, 0.4);
    border-image: linear-gradient(
        90deg,
        rgba(0, 224.000001847744, 119.00000050663948, 1),
        rgba(0, 224.000001847744, 119.00000050663948, 0.10000000149011612),
        rgba(0, 224.000001847744, 119.00000050663948, 1)
      )
      1 1;
  }
}
.item-con :hover {
  // transform: scale(1.5);
  transform: scale(1.3);
  transition: all 0.3s ease 0s;
  -webkit-transform: scale(1.3);
}
</style>